<template>
  <div class="liveSet">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>红包发放记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-bar">
      <!-- <el-button type="primary" size="medium" @click="handleAdd">添加子活动</el-button> -->
      <div class="selectBox">
        发放状态：
        <el-select
          style="margin-right: 10px"
          clearable
          @change="selectPayStatus"
          v-model="outValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in outStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        到账状态：
        <el-select
          style="margin-right: 10px"
          clearable
          @change="selectOrderStatus"
          v-model="comValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in comStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>&nbsp;&nbsp;战区团队：</span>
        <el-select
          v-model="team_id"
          clearable
          @change="selectTeam"
          filterable
          placeholder="请选择团队"
        >
          <el-option
            v-for="item in teamList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span>&nbsp;&nbsp;商户：</span>
        <el-select
          v-model="store_id"
          clearable
          @change="selectStore"
          filterable
          placeholder="请选择商户"
        >
          <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="item.store_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        分享用户：
        <el-select
          v-model="shareValue"
          style="margin-right: 10px"
          multiple
          filterable
          remote
          reserve-keyword
          multiple-limit="1"
          placeholder="请输入分享用户"
          @change="selectShare"
          :remote-method="shareListFn"
          :loading="loading"
        >
          <el-option
            v-for="item in shareList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          >
          </el-option>
        </el-select>
        卖场：
        <el-select
          v-model="marketId"
          clearable
          @change="selectMarket"
          filterable
          placeholder="请选择卖场"
        >
          <el-option
            v-for="item in marketList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div style="margin: 15px 0 0 0; display: flex; align-items: center">
          下发渠道：
          <el-select
            v-model="cash_channel"
            clearable
            filterable
            @change="selectCash"
            placeholder="请选择"
          >
            <el-option label="线下" value="0"></el-option>
            <el-option label="系统自动" value="1"></el-option>
            <el-option label="不予下发" value="-1"></el-option>
          </el-select>
          <div style="margin-left: 20px">
            当前金额：<strong style="font-size: 18px">{{ amount }}</strong>
          </div>
          <div style="margin-left: 50px">
            已推送总额：<strong style="font-size: 18px">{{
              okPushAmount
            }}</strong>
          </div>
          <div style="margin-left: 50px">
            累计总额：<strong style="font-size: 18px">{{ toTalAmount }}</strong>
          </div>
        </div>
        <!-- <el-button type="primary" style="margin-left:20px;" size="medium" @click="outFile">导出</el-button> -->
      </div>
      <div class="inputSearch">
        <el-popover
          placement="bottom"
          width="310"
          @hide="hideFN"
          v-model="visible"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-end;
            "
          >
            从第几条开始导出：<el-input
              style="width: 50%"
              @blur="inputStartNo"
              v-model="start_no"
              placeholder="请输入"
              type="number"
            ></el-input>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              margin: 10px 0;
              justify-content: flex-end;
            "
          >
            导出数量(最大5000)：<el-input
              style="width: 50%"
              @blur="inputEndNo"
              v-model="end_no"
              placeholder="请输入"
              type="number"
            ></el-input>
          </div>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="outFile"
              >确定</el-button
            >
          </div>
          <el-button
            slot="reference"
            style="margin-right: 20px"
            type="primary"
            size="medium"
            >导出</el-button
          >
        </el-popover>
        <el-input
          placeholder="输入订单号模糊搜索"
          v-model="keyword"
          clearable
          @input="clearInput"
          @keyup.enter.native="searchInput"
        ></el-input>
        <el-button type="primary" size="medium" @click="searchInput"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="partnerList_table">
      <div class="partnerList_bottom_table">
        <table>
          <tr>
            <th></th>
            <th>ID</th>
            <th>战队</th>
            <th>战队商户</th>
            <th>分享者</th>
            <th>分享者ID</th>
            <th>购买用户</th>
            <th>购买者ID</th>
            <th>订单ID</th>
            <th>商品ID</th>
            <th>下发渠道</th>
            <th>发放状态</th>
            <th>到账状态</th>
            <th>下发金额</th>
            <th>下发时间</th>
            <th>下发信息</th>
            <th>备注</th>
            <th>所属卖场</th>
            <th>记录时间</th>
          </tr>
          <tr v-for="(v, i) in tableList" :key="i">
            <td>
              <font
                class="checkbox"
                :class="{ check_active: checkBoxAll.includes(i) }"
                @click="handlerCheckbox(i)"
                ><i class="el-icon-check"></i
              ></font>
            </td>
            <td>{{ v.id }}</td>
            <td>
              {{ v.team_name == null ? "---" : v.team_name }}
            </td>
            <td>
              {{ v.store_name == null ? "---" : v.store_name }}
            </td>
            <td>
              {{ v.rec_nickname }}
              <p>{{ v.rec_mobile }}</p>
            </td>
            <td>{{ v.receiver_uid }}</td>
            <td>
              {{ v.buy_nickname }}
              <p>{{ v.buy_mobile }}</p>
            </td>
            <td>{{ v.purchase_uid }}</td>
            <td>
              主订单：{{ v.order_id }}
              <p>子订单：{{ v.order_code }}</p>
            </td>
            <td>{{ v.product_id }}</td>
            <td>
              {{
                v.cash_channel == 0
                  ? "线下"
                  : v.cash_channel == 1
                  ? "系统自动"
                  : v.cash_channel == -1
                  ? "不予下发"
                  : ""
              }}
            </td>
            <td>
              <div v-if="v.cash_channel != 0">
                {{ v.status == 1 ? "已发放" : v.status == 0 ? "未发放" : "" }}
              </div>
              <div v-else>/</div>
            </td>
            <td>
              <div v-if="v.cash_channel != 0">
                {{
                  v.status_rec == 1
                    ? "已到账"
                    : v.status_rec == 0
                    ? "未到账"
                    : ""
                }}
              </div>
              <div v-else>/</div>
            </td>
            <td>{{ v.amount }}</td>
            <td>
              {{
                v.status == 1
                  ? $moment(v.payed_at * 1000).format("yyyy-MM-DD HH:mm:ss")
                  : "/"
              }}
            </td>
            <td style="max-width: 180px">{{ v.payed_msg }}</td>
            <td style="max-width: 180px">{{ v.remark }}</td>
            <td>{{ v.market_name }}</td>
            <td>
              {{ $moment(v.created_at * 1000).format("yyyy-MM-DD HH:mm:ss") }}
            </td>
            <!-- <td> -->
            <!-- <el-button v-if="v.order_status==4 && v.pay_status==1 && !v.order_id_grr" type="primary" size="small" @click="toBuFa(v.order_id)">补发</el-button> -->
            <!-- <button class="editor" :class="{'delete':v.status==1}" @click="toChange(v.item_id,v.status)">{{v.status==1?'关闭':'开启'}}</button> -->
            <!-- <button class="yellow" @click="toDel(v.id)">删除</button> -->
            <!-- <button class="shelves" @click="toDetail(v.order_id)">详情</button> -->
            <!-- </td> -->
          </tr>
          <tr v-if="tableList.length == 0">
            <td class="table_title" colspan="20">当前数据空空如也</td>
          </tr>
        </table>
        <div class="partnerList_bottom_page">
          <div class="partnerList_bottom_page_left">
            <div
              class="partnerList_bottom_page_left_checkAll"
              @click="handerCheckAll"
            >
              <font class="checkbox" :class="{ check_active: checkAll }"
                ><i class="el-icon-check"></i
              ></font>
            </div>
            全选
            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
          </div>
          <div class="partnerList_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      tableList: [],
      keyword: "",
      code: "",
      activity_id: "", //主活动id
      fatherName: "", //主活动名称
      outStatus: [
        {
          label: "未发放",
          value: 0,
        },
        {
          label: "已发放",
          value: 1,
        },
      ],
      outValue: "",

      comStatus: [
        {
          label: "未到账",
          value: 0,
        },
        {
          label: "已到账",
          value: 1,
        },
      ],
      comValue: "",
      loading: false,

      shareValue: "",
      shareList: [],
      marketId: "", //卖场id
      marketList: [],

      cash_channel: "", //下发渠道

      // 导出弹出框
      visible: false,
      start_no: 1, //从第几条开始导出
      end_no: 1, //导出数量
      amount: 0, //当前金额
      okPushAmount: 0, //已推送总额
      toTalAmount: 0, //累计总额
      teamList: [],
      team_id: "", //团队id
      storeList: [],
      store_id: "",
    };
  },
  mounted() {
    this.activity_id = this.$route.query.id;
    this.fatherName = this.$route.query.name;
    this.getSetList();
    this.remoteMethod();
    this.getTeamAll();
    this.getStoreAll();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },
    //选择团队
    selectTeam() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },
    //获取团队下拉选择数据
    getTeamAll() {
      this.$http.post("/api/root/activity/team/list").then((res) => {
        if (res.code == 1) {
          this.teamList = res.data.teams ? res.data.teams : [];
        }
      });
    },
    //选择团队下的商户
    selectStore() {
      this.page = 1;
      this.pageSize = 10;
      // if(!this.team_id || this.team_id==''){
      // 	this.$message.warning('请先选择团队')
      // 	return;
      // }
      this.getSetList();
    },
    //获取商户列表
    getStoreAll() {
      this.$http.post("/api/root/store/select/all").then((res) => {
        if (res.code == 1) {
          this.storeList = res.data ? res.data : [];
        }
      });
    },
    // 获取红包发放列表o
    getSetList() {
      let params = {
        order_id: this.keyword,
        page: this.page,
        pagesize: this.pageSize,
        status: this.outValue,
        status_rec: this.comValue,
        receiver_uid: this.shareValue.join(","),
        market_id: this.marketId,
        cash_channel: this.cash_channel,
        store_id: this.store_id,
        team_id: this.team_id,
      };
      this.$http.post("/api/root/activity/red/record", params).then((res) => {
        console.log(res, "活动列表");
        if (res.code == 1) {
          this.amount = res.data.amount; //当前金额
          this.okPushAmount = res.data.okPushAmount; //已推送总额
          this.toTalAmount = res.data.toTalAmount; //累计总额
          this.tableList = res.data.records ? res.data.records : [];
          this.total = res.data.total;
        }
      });
    },

    // 输入验证
    inputStartNo() {
      if (this.start_no * 1 < 1) {
        this.start_no = 1;
        this.$message.warning("最小为第1条开始导出");
      } else if (this.start_no * 1 > this.total * 1) {
        this.start_no = this.total;
        this.$message.warning(`最大为第${this.total}条开始导出`);
      }
    },
    inputEndNo() {
      if (this.end_no * 1 < 1) {
        this.end_no = 1;
        this.$message.warning("最小导出数量为1");
      } else if (this.end_no * 1 > 5000) {
        this.end_no = 5000;
        this.$message.warning("最大导出数量为5000");
      }
    },

    // 导出弹出隐藏
    hideFN() {
      this.start_no = 1;
      this.end_no = 1;
    },
    // 导出按钮
    outFile() {
      if (this.start_no == "") {
        this.$message.warning("请输入从第几条开始导出");
        return;
      }
      if (this.end_no == "") {
        this.$message.warning("请输入导出数量");
        return;
      }
      var a = document.createElement("a");
      let receiver_uid = this.shareValue.join(",");
      a.setAttribute(
        "href",
        `/api/root/activity/redrecord/export?order_id=${this.keyword}&status=${this.outValue}&status_rec=${this.comValue}&market_id=${this.marketId}&receiver_uid=${receiver_uid}&cash_channel=${this.cash_channel}&start_no=${this.start_no}&end_no=${this.end_no}`
      );
      a.setAttribute("target", "_blank");
      a.setAttribute("id", "startTelMedicine");
      // 防止反复添加
      if (document.getElementById("startTelMedicine")) {
        document.body.removeChild(document.getElementById("startTelMedicine"));
      }
      document.body.appendChild(a);
      a.click();
    },

    // 获取用户列表
    shareListFn(query) {
      console.log(query, "参数");
      this.$http
        .post("/api/root/users/lists", { keyword: query })
        .then((res) => {
          console.log(res, "用户列表");
          if (res.code == 1) {
            this.shareList = res.data.users;
          }
        });
    },
    // 选择分享人
    selectShare() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },

    // 进入详情
    toDetail(orderId) {
      this.$router.push({
        name: "activityGoodsOrderDetail",
        query: { orderId },
      });
    },

    // 选择下发渠道
    selectCash() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },

    // 选择订单状态
    selectPayStatus() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },
    // 选择订单状态
    selectOrderStatus() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },

    // 节目列表
    toParty(id) {
      this.$router.push({ name: "partyList", query: { id } });
    },

    // 搜索
    searchInput() {
      // this.$router.push({name:'activityGoodsOrderDetail',query:{}})
      if (this.keyword != "") {
        this.page = 1;
        this.pageSize = 10;
        this.getSetList();
      }
    },
    // 清空输入框
    clearInput() {
      if (this.keyword == "") {
        this.page = 1;
        this.pageSize = 10;
        this.getSetList();
      }
    },

    // 补发奖品
    toBuFa(order_id) {
      this.$http
        .post("/api/root/activity/order/sent", { order_id })
        .then((res) => {
          console.log(res, "补发奖品结果");
          if (res.code == 1) {
            this.$message.success("补发成功");
            this.getSetList();
          } else {
            this.$message.warning(res.msg);
          }
        });
    },

    // 添加活动按钮
    handleAdd() {
      this.$router.push({
        name: "addChildActivity",
        query: { activity_id: this.activity_id },
      });
    },

    // 删除按钮
    toDel(id) {
      this.$confirm("此操作将删除此该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post("/api/root/activity/son/del", { id }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getSetList();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message.warning(res.msg);
          }
        });
      });
    },

    // 编辑按钮
    toEdit(id) {
      this.$router.push({
        name: "addChildActivity",
        query: { id, activity_id: this.activity_id },
      });
    },

    // 更改状态
    toChange(id, sta) {
      let params = {
        id,
        status: sta == 1 ? 0 : 1,
      };
      this.$http.post("/api/root/activity/son/status", params).then((res) => {
        console.log(res, "更改状态");
        if (res.code == 1) {
          this.$message.success("更改成功");
          this.getSetList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    //更改直播配置
    // toChange(id,sta){
    //     let status = sta==0?1:0;
    //     this.$http.post('/api/root/SystemConfig/changeStatus',{id,status}).then(res=>{
    //         console.log(res,'直播配置结果');
    //         if(res.code==1){
    //             this.$message.success('操作成功')
    //             this.getSetList()
    //         }else{
    //             this.$message.warning(res.msg)
    //         }
    //     })
    // },

    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.getSetList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSetList();
    },
  },
};
</script>
<style lang="less" scoped>
@import "index.less";
</style>